<template>
	<view class="content" style="padding-bottom: 120upx;">
		<view class="top-view" v-if="type ==2">
			<text class="title">{{detail.title}}</text>
			<view class="info-view">
				<image class="info-icon" :src="detail.avatar" mode="widthFix"></image>
				<view class="info-mes">
					<view class="info-mes-top">
						<text class="info-name">{{detail.nickname}}</text>
						<view class="share_view">
							<button hover-class="none" type="default"
								style="opacity: 0;position: absolute;left: 0;width: 100%;height: 100%;top: 0;"
								open-type="share"></button>
							<image style="width: 36upx;height: 36upx;" src="../../static/images/hot_share_icon.png">
							</image>
						</view>
					</view>
					<text class="date">{{detail.add_time}}</text>
				</view>
			</view>
			<text class="content-mes">{{detail.brief}}</text>
			<view class="potho-view">
				<image class="potho" mode="widthFix" :src="item" v-for="(item,index) in detail.images_urls"
					:key="index"></image>
			</view>
		</view>
		<view class="top-view" v-if="type ==1">
			<text class="title" style="font-weight: bold;">{{detail.title}}</text>
			<view class="info-view">
				<!-- <image class="info-icon" :src="detail.avatar" mode="widthFix"></image> -->
				<view class="info-mes">
					<view class="info-mes-top">
						<text class="info-name" style="font-weight: bold;">{{detail.author}}</text>
						<view class="share_view">
							<button hover-class="none" type="default"
								style="opacity: 0;position: absolute;left: 0;width: 100%;height: 100%;top: 0;"
								open-type="share"></button>
							<image style="width: 36upx;height: 36upx;" src="../../static/images/hot_share_icon.png">
							</image>
						</view>
					</view>
					<text class="date">{{detail.add_time}}</text>
				</view>
			</view>
			<!-- <view class="content-mes" v-html="detail.content"></view> -->
			
			<view class="description" v-html="description"></view>
			<!-- <view class="potho-view">
				<image class="potho" mode="widthFix" :src="item" v-for="(item,index) in detail.image_input"
					:key="index"></image>
			</view> -->
		</view>
		<!-- 评价列表 -->
		<view class="evaluation">
			<view class="evaluation-header">
				<text>所有评价({{commentList.length}})</text>
				<text v-if="type ==1">浏览{{detail.visit||''}}</text>
				<text v-if="type ==2">浏览({{detail.view_count || ''}})</text>
			</view>
			<evaluationItem v-for="(item,index) in commentList" :key="index" :datasource="item"></evaluationItem>
		</view>
		<!-- 底部操作 -->
		<view class="bottom">
			<view class="bottom-input-view">
				<image style="width: 24upx;height: 24upx;margin-right: 40upx;" src="../../static/images/shuxie_bg.png"
					mode="widthFix"></image>
				<input class="input1" :type="text"  v-model="content" placeholder="说说你的看法"
					 />
					
			</view>
			<view class="bottm-btn-view">
				<view style="width: 110rpx;margin:0 20rpx;border: 1px solid #f9f9f9;border-radius: 8rpx;text-align: center;line-height: 60rpx;" @click="trendsComment">
					提交
				</view>
				<view class="dianzan" @click="trendsPraise()">
					<image class="tupiao"
						:src="detail.praise_flag?'../../static/images/dianzan_s.png':'../../static/images/dianzan_n.png'"
						mode="widthFix"></image>
					<text class="zanNumber">{{detail.praise_count}}</text>
				</view>
				<image class="tupiao" @click="trendsCollect()"
					:src="detail.collect_flag?'../../static/images/shoucang_s.png':'../../static/images/shoucang_n.png'"
					mode="widthFix"></image>
			</view>
		</view>
		<!-- 侧边 -->
		<view class="right-btn" v-if="type == 2 && detail.edit_flag">
			<image @click="edit" src="../../static/images/edit_btn.png" mode="widthFix"></image>
			<image @click="deleteAction" src="../../static/images/delete_btn.png" style="margin-top: 16upx;"
				mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import evaluationItem from '@/components/evaluation-item/index.vue'
	import {
		trendsDetail,
		trendsCommentList,
		trendsComment,
		trendsCollect,
		trendsPraise,
		trendsShare,
		articleShare,
		articleCommentList,
		getArticleDetail,
		articleCollect,
		articlePraise,
		articleComment
	} from '@/api/peopleHide.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		props: {

		},
		components: {
			evaluationItem
		},
		computed: mapGetters(['isLogin']),
		watch: {

		},
		data() {
			return {
				type: 1,
				id: '1', //晒宝id或资讯id
				content: '', //评价内容
				detail: {},
				commentList: [],
				description:""
			}
		},
		onLoad(options) {
			if (options.type) {
				let title = options.type == 1 ? '热门资讯' : '藏友晒宝'
				this.type = options.type
				this.id = options.id || ''
				uni.setNavigationBarTitle({
					title: title
				})

			}
		},
		onShow() {
			this.getDatasource()
		},
		onShareAppMessage(res) {
			let taht = this
			let path = "pages/hotNewDetails/index?id=" + this.id
			if (this.type == 1) {
				path = path + "&type=1"
			} else {
				path = path + "&type=2"
			}
			// console.log(path)
			return {
				title: this.detail.title,
				path: path,
				success: function(res) {
					// 转发成功
					console.log("转发成功:" + JSON.stringify(res));
					if(that.type == 2){
						taht.shareUpload()
					}else if(that.type == 1){
						taht.shareUpload()
					}
					
				},
				fail: function(res) {
					// 转发失败
					console.log("转发失败:" + JSON.stringify(res));
				}
			}
		},
    onShareTimeline(res) {
    	let taht = this
    	let path = "pages/hotNewDetails/index?id=" + this.id
    	if (this.type == 1) {
    		path = path + "&type=1"
    	} else {
    		path = path + "&type=2"
    	}
    	// console.log(path)
    	return {
    		title: this.detail.title,
    		path: path,
    		success: function(res) {
    			// 转发成功
    			console.log("转发成功:" + JSON.stringify(res));
    			if(that.type == 2){
    				taht.shareUpload()
    			}else if(that.type == 1){
    				taht.shareUpload()
    			}
    			
    		},
    		fail: function(res) {
    			// 转发失败
    			console.log("转发失败:" + JSON.stringify(res));
    		}
    	}
    },
		methods: {
			shareUpload() {
				if (this.type == 2) {
					trendsShare({
						id: this.id
					}).then(res => {
						this.getDatasource()
					})
				} else {
					articleShare({
						id: this.id
					}).then(res => {
						this.getDatasource()
					})
				}
			},
			getDatasource() {
				if (this.type == 1) {
					this.articleCommentList()
					this.getArticleDetail()
				} else { //晒宝
					this.trendsDetail()
					this.trendsCommentList()
				}
			},
			deleteAction() {
				uni.showModal({
					content: '删除该晒宝？',
					success(res) {
						if (res.confirm) {

						}
					}
				})
			},
			edit() {
				uni.navigateTo({
					url: '/pages/users/addTreasure/index?joinType=2&id=' + this.detail.id
				})
			},
			showModalAleat(content) {
				uni.showToast({
					title: content,
					icon: 'none',
					duration: 800
				})
			},
			trendsDetail() { //晒宝详情
				trendsDetail({
					id: this.id
				}).then(res => {
					this.detail = res.data
				})
			},
			trendsPraise() { //点赞操作  articlePraise
				let that = this
				if (this.isLogin) {
					if (this.type == 1) {
						articlePraise({
							article_id: this.id,
							praise_flag: this.detail.praise_flag ? 0 : 1
						}).then(res => {
							let title = '点赞成功'
							if (this.detail.praise_flag) {
								title = '取消点赞成功'
							}
							that.showModalAleat(title)
							setTimeout(function() {
								that.getDatasource()()
							}, 900);

						})
					} else if (this.type == 2) {
						trendsPraise({
							trends_id: this.id,
							praise_flag: this.detail.praise_flag ? 0 : 1
						}).then(res => {
							let title = '点赞成功'
							if (this.detail.praise_flag) {
								title = '取消点赞成功'
							}
							that.showModalAleat(title)
							setTimeout(function() {
								that.getDatasource()
							}, 900);

						})
					}

				} else {
					toLogin();
				}
			},
			trendsCollect() { //收藏操作
				let that = this
				if (this.isLogin) {
					if (this.type == 2) {
						trendsCollect({
							trends_id: this.id,
							collect_flag: this.detail.collect_flag ? 0 : 1
						}).then(res => {
							let title = '收藏成功'
							if (this.detail.collect_flag) {
								title = '取消收藏成功'
							}
							that.showModalAleat(title)
							setTimeout(function() {
								that.getDatasource()
							}, 900);

						})
					} else if (this.type == 1) {
						articleCollect({
							article_id: this.id,
							collect_flag: this.detail.collect_flag ? 0 : 1
						}).then(res => {
							let title = '收藏成功'
							if (this.detail.collect_flag) {
								title = '取消收藏成功'
							}
							that.showModalAleat(title)
							setTimeout(function() {
								that.getDatasource()
							}, 900);
						})
					}
				} else {
					toLogin();
				}

			},
			trendsComment() { //评价
			var _this=this
				if (this.isLogin) {
					if(this.type == 1){
						articleComment({
							// id:this.id,
							article_id:this.id,
							content:this.content
						}).then(res=>{
							_this.content = ''
							_this.articleCommentList()
						})
					}else if(this.type == 2){
						trendsComment({
							trends_id: this.id,
							content: this.content
						}).then(res => {
							_this.content = ''
						
							_this.trendsCommentList()
						})
					}
					
				} else {
					toLogin();
				}
			},
			trendsCommentList() { //晒宝评价列表
				trendsCommentList({
					trends_id: this.id
				}).then(res => {
					this.commentList = res.data
				})
			},

			getArticleDetail() { //资讯详情
				getArticleDetail({
					id: this.id
				}).then(res => {
					this.detail = res.data
					this.description = res.data.content.replace(/<img/gi,
						'<img style="max-width:100%;height:auto;float:left;display:block" ');
				})
			},
			articleCommentList() {
				articleCommentList({
					article_id: this.id
				}).then(res => {
					this.commentList = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f6;
	}

	.top-view {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 0 50upx;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin-top: 32upx;
		}
	}

	.info-view {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;

		.info-icon {
			width: 112upx;
			height: 112upx;
			border-radius: 50%;
		}

		.info-mes {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-left: 20upx;
			justify-content: center;

			.info-mes-top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-name {
					color: #333;
					font-size: 28upx;
					font-weight: 500;
				}
			}

			.date {
				color: #999999;
				font-size: 24upx;
				margin-top: 16upx;
			}
		}
	}

	.content-mes ,.rich-box{
		color: #333;
		font-size: 28upx;
		font-weight: 400;
		line-height: 40upx;
		margin-top: 20upx;
	
		
	}

	.potho-view {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 40upx;
		margin-top: 20upx;

		.potho {
			width: 650upx;
			// height: 650upx;
			margin-top: 20upx;
			// background-color: #1ABB1D;
		}
	}

	.evaluation {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 20upx;
	}

	.evaluation-header {
		width: 100%;
		height: 98upx;
		display: flex;
		align-items: center;
		padding: 0 50upx;
		box-sizing: border-box;
		justify-content: space-between;
		font-size: 24upx;
		color: #666666;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		padding: 0 44upx 0 28upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		z-index: 9;
		border-top: 1px solid#f8f8f8;

		.bottom-input-view {
			background-color: #F9F9F9;
			width: 540upx;
			height: 70upx;
			border-radius: 36upx;
			display: flex;
			align-items: center;
			padding: 0 40upx;
			box-sizing: border-box;
		}

		.input1 {
			flex: 1;
		}

		.bottm-btn-view {
			display: flex;
			align-items: center;

			.dianzan {
				position: relative;
				margin-right: 30upx;
				width: 48upx;
				height: 48upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.zanNumber {
					position: absolute;
					color: #FF0000;
					font-size: 16upx;
					right: -5upx;
					top: -5upx;
					line-height: 22upx;
					z-index: 3;
				}
			}

			.tupiao {
				width: 48upx;
				height: 48upx;
			}
		}
	}

	.right-btn {
		position: fixed;
		right: 30upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 10;
		bottom: 256upx;

		image {
			width: 128upx;
			height: 128upx;
		}
	}

	.share_view {
		display: flex;
		position: relative;
		overflow: hidden;
	}
</style>
